<template>
  <div class="box">
    <div class="attachment">
      <el-table :data="tableData" style="width: 100%">
        <el-table-column type="index" show-overflow-tooltip label="序号"></el-table-column>
        <el-table-column prop label="附件名称">
          <template slot-scope="scope">{{scope.row.landReclaimAgencyAgreementFile.fileName}}</template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="primary"
              @click="btn_see(scope.row.landReclaimAgencyAgreementFile.fileName,scope.row.landReclaimAgencyAgreementFile.filePath)"
            >查看</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <el-dialog :title="title" :visible.sync="attachmentDialog" width="60%">
      <span v-show="loadIfram==1" class="iframeLoad">
        加载中
        <div class="el-icon-loading"></div>
      </span>
      <iframe
        frameborder="0"
        v-show="loadIfram==2"
        id="iframe"
        name="showHere"
        scrolling="auto"
        width="100%"
        height="600"
        :src="path"
      ></iframe>
    </el-dialog>
  </div>
</template>

<script>
import { queryAllByProjectId } from "@/api/fkEntrust";
export default {
  data() {
    return {
      attachmentDialog: false,
      title: "",
      tableData: [],

      loadIfram: 1,
      path: ""
    };
  },
  created() {
    this.getData();
  },
  
  methods: {
    getData() {
      var data = {
        projectId: localStorage.getItem("projectId")
      };
      queryAllByProjectId(data).then(res => {
        this.tableData = res.data;
      });
    },
    btn_see(title, path) {
      console.log(title, path);
      let that = this;
      that.attachmentDialog = true;
      that.title = title;
      that.path = that.$https + path;
      that.loadIfram = 2;
            
       that.$nextTick(()=>{
        var iframe = document.getElementById("iframe");
          iframe.onload = function(){
            console.log("加载完成")
            that.loadIfram=2
        };
      })
    },
    
  },
  
};
</script>

<style scoped>
* {
  box-sizing: border-box;
}
.box {
  padding: 30px;
}
.pageStyle {
  margin-top: 20px;
  text-align: center;
}
.iframeLoad {
  display: flex;
  font-size: 35px;
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: center;
}
</style>